<ui:composition xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:ajax="http://code.google.com/p/ada-asf/ajax"
                template="/WEB-INF/layouts/demo.xhtml">
    <ui:param name="title" value="#{samplesMsg.sample_ajax_page_title}" />
    <ui:param name="tab" value="ajax"/>
    <ui:param name="source_file" value="ajax.xhtml"/>
    <!-- Main page body -->
    <ui:define name="demoBody">
  <div>
      <h1>#{samplesMsg.compute_message}</h1>
      <p>Shows the <tt>&amp;lt;ajax:include&gt;&lt;/ajax:include&gt;</tt> form</p>
      <div class='sample'>
          <ajax:include id='container' src='compute-form'/>
      </div>

      <h1>#{samplesMsg.demo_ajax_form_message}</h1>
      <p>Shows the <tt>ASF.Update</tt> javascript operation</p>
      <div class='sample'>
          <div class='asf-container'>
              <div onclick="ASF.Update(this, '#{contextPath}/compute-form.html')">
                  #{samplesMsg.demo_click_form_message}
              </div>
          </div>
      </div>

      <h1>#{samplesMsg.demo_ajax_json_message}</h1>
      <p>Shows the <tt>ASF.Update</tt> javascript with a JSON response</p>
      <div class='sample'>
          <div class='asf-container' onclick="ASF.Update(this, '#{contextPath}/json-response.html')">
              #{samplesMsg.demo_click_json_message}
          </div>
          <div>
              <div id='item1' style='display: none'>#{samplesMsg.demo_div_hidden_message}</div>
              <div id='item2' style='display: block'>#{samplesMsg.demo_div_visible_message}</div>
              <div id='item3' style='display: block'>#{samplesMsg.demo_div_visible_message}</div>
          </div>
      </div>


      <h1>#{samplesMsg.demo_dialog_message}</h1>
      <p>Shows the <tt>ASF.Update</tt> javascript with a JSON response</p>
      <div class='sample'>
          <div class='asf-container' id='result'
               onclick="return ASF.OpenDialog(this, 'computeDialog', '#{contextPath}/compute-form.html');">
              #{samplesMsg.demo_click_json_message}
          </div>
      </div>
  </div>
    </ui:define>
</ui:composition>
